<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body{
            margin: 0 auto;
        }
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 400px;
        }
        a{
            color: white;
        }
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 400px;
            border: #363636;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="background-color: #363636">
            <h1 style="font-size: 22px;color: white">
                汇福聚财物业管理系统
                <div style="float: right">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px;color: white"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>
                    欢迎XXX回来
                    <a href="">退出登录</a>
                </span>
                </div>
            </h1>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu @select="handleSelect">
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-user-solid"></i>人员管理</template>
<!--                        <el-menu-item index="3-1"><i class="el-icon-s-custom"></i>业主信息</el-menu-item>-->
                        <el-submenu index="3-1">
                            <template slot="title"><i class="el-icon-s-custom"></i>业主信息</template>
                            <el-menu-item index="3-1-1"><i class="el-icon-caret-right"></i>业主列表</el-menu-item>
                            <el-menu-item index="3-1-2"><i class="el-icon-caret-right"></i>增加业主</el-menu-item>
                        </el-submenu>
                        <el-submenu index="3-2">
                            <template slot="title"><i class="el-icon-s-custom"></i>工作人员</template>
                            <el-menu-item index="3-2-1"><i class="el-icon-caret-right"></i>管理员列表</el-menu-item>
                            <el-menu-item index="3-2-2"><i class="el-icon-caret-right"></i>增加管理员</el-menu-item>
                            <el-menu-item index="3-2-3"><i class="el-icon-caret-right"></i>工作考勤</el-menu-item>

                        </el-submenu>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <!--业主信息列表开始-->
                <el-table v-if="currentIndex=='3-1-1'"
                          :data="personArr"
                          style="width: 100%">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="nickname" label="昵称"></el-table-column>
                    <el-table-column prop="gender" label="性别"></el-table-column>
                    <el-table-column prop="tel" label="电话"></el-table-column>
                    <el-table-column prop="created" label="购买房子时间"></el-table-column>
                    <el-table-column prop="carNumberId" label="车牌号"></el-table-column>
                    <el-table-column prop="addressId" label="地址"></el-table-column>

                    <el-table-column label="照片" width="80">
                        <template slot-scope="scope">
                            <img :src="scope.row.url" width="100%">
                        </template>
                    </el-table-column>

                    <el-table-column label="操作">
                        <!--scope定义的一个变量名, 里面包含当前行的信息
                        scope.$index得到当前行的下标
                        scope.row 得到当前行对应数组里面的对象
                        -->
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="success"
                                    @click="personUpdate(scope.$index, scope.row)">修改</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="personDelete(scope.$index, scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <!--业主信息列表结束-->

                <!--管理员信息列表开始-->
                <el-table v-if="currentIndex=='3-2-1'"
                          :data="adminArr"
                          style="width: 100%">
                    <el-table-column type="index" label="编号"></el-table-column>
                    <el-table-column prop="name" label="账户"></el-table-column>
                    <el-table-column prop="password" label="密码"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="adminDelete(scope.$index, scope.row)">删除
                            </el-button>

                            <el-button
                                    size="mini"
                                    type="success"
                                    @click="personUpdate(scope.$index, scope.row)">修改
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--管理员信息列表结束-->
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                currentIndex:"3-1-1",
                personArr:[],
                adminArr:[]
            }
        },
        methods:{
            personUpdate(i,a){
                //跳转到修改业主信息的页面
                if(confirm("您确认修改信息吗？")){
                    location.href="/updatePerson.html?id="+a.id;
                }
            },
            /*
            * 这个p代表的是personArr中的对象，先查到id(select语句中，要查到id),才能删除id，
            * 先从数据库中查出对象，然后放到数组中，需要id的时候才能点id
            * */
            personDelete(i,p){
                console.log(p.id);
                if (confirm("您确认删除此业主信息吗？")){
                    axios.get("/person/deleteById?id="+p.id).then(function () {
                        v.personArr.splice(i,1);
                        v.$message.success("删除成功!");
                    })
                }
            },
            adminDelete(i,m){
                if (confirm("您确认删除此工作人员信息吗？")){
                    axios.get("/admin/deleteById?id="+m.id).then(function () {
                        v.adminArr.splice(i,1);
                        v.$message.success("删除成功!");
                    })
                }
            },
            handleSelect(key,keyPath){
                //记录当前用户点击的导航菜单的位置
                if (key=='3-1-2'){
                    location.href="insertPerson.html"
                }else if (key=='3-2-2'){
                    location.href="insertAdmin.html"
                }else{
                    v.currentIndex = key;
                }
            }
        },
        created:function () {
            //获取业主所有的信息
            axios.get("/person/list").then(function (response) {
                console.log("0=============",response.data);
                console.log("0====",response);
                v.personArr=response.data;
            })

            //获取管理员的所有信息
            // axios.get("/admin/select").then(function (response) {
            //     v.adminArr=response.data;
            // })
        }
    })
</script>
</html>